<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>clive客服工作台</title>
    <link rel="stylesheet" href="/static/service/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/service/css/clive.css">
  <style>
  .layui-body {
    left: 0px;
}
    .chat-left {
    width: 100%;
}
.layui-tab-title li {
    width: 25%;
}
.layui-tab-title li {
    line-height: 25px;
    padding: 0px 0px;
}
.active {
    background:rgba(255,255,255,.5);
  	color:#333;
}
.layui-tab {
    margin: 3px 0;
}
.chat-left {
    height: 93%;
}
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="color: white">客服工作台</div>
        <ul class="layui-nav layui-layout-right">
            <li style="margin-top: 10%">
                <a href="javascript:;" onclick="loginOut()">
                    <button class="layui-btn layui-bg-red">
                        <i class="layui-icon">&#xe609;</i> 退出下班
                    </button>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-body" style="bottom:0">
      <div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title" id="user_list">
   
  </ul>
  <div class="layui-tab-content"></div>
</div>
        <input type="hidden" id="active-user" data-avatar="" data-name="" data-id=""><!-- 当前对话的用户 -->
        <div class="chat-left">
            <div class="chat-box clive-chat-main">

            </div>
            <div class="msg-send">
                <div class="tools-bar">
                    <i class="layui-icon" style="font-size: 30px;" id="face">&#xe60c;</i>
                    <i class="layui-icon" style="font-size: 30px;" id="image">&#xe60d;</i>
                    <i class="layui-icon" style="font-size: 30px;" id="file">&#xe61d;</i>
                    <span style="float: right;cursor: pointer" id="cut">怎么发截图？</span>
                </div>
                <div class="msg-box">
                    <textarea class="msg-area" id="msg-area"></textarea>
                </div>
                <div class="send-area">
                    <span style="margin-left:10px;color:gray">快捷键 Enter</span>
                    <button class="layui-btn layui-btn-small layui-bg-cyan" style="float:right;margin-right:10px;height: 40px;padding: 0 15px;" id="send">
                        <i class="layui-icon">&#xe609;</i>发送
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 转接提示层 -->
<div class="layui-form" id="change-box" style="display: none">
    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">选择分组</label>
        <div class="layui-input-block" style="width: 70%" >
            <select lay-verify="required" lay-filter="group">
                <option value=""></option>
                {if !empty($groups)}
                {foreach name="groups" item="vo"}
                <option value="{$vo['id']}">{$vo['name']}</option>
                {/foreach}
                {/if}
            </select>
        </div>
    </div>
</div>
<!-- 转接提示层 -->

<script src='https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js'></script>
<script src="/static/service/js/layui/layui.js"></script>
<script>
    var uid = "{$uinfo['id']}";
    var uname = "{$uinfo['user_name']}";
    var avatar = "{$uinfo['user_avatar']}";
    var group = "{$uinfo['group_id']}";
    var socket_server = "{$socket}";
  
</script>
<script type="text/javascript" src="/static/service/js/functions.js"></script>
<script type="text/javascript" src="/static/service/js/mclive.js?v=1"></script>
</body>
</html>